{% extends 'base.html' %}
{% load static %}

{% block title %}个人中心{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <!-- 左侧个人信息 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <img src="{{ user.profile_picture.url|default:'static/images/default-avatar.png' }}" 
                         class="rounded-circle mb-3" style="width: 150px; height: 150px;" alt="头像">
                    <h5 class="card-title">{{ user.username }}</h5>
                    <p class="card-text">{{ user.email }}</p>
                    <div class="mt-3">
                        <a href="{% url 'edit_profile' %}" class="btn btn-primary">编辑资料</a>
                        <a href="{% url 'change_password' %}" class="btn btn-secondary">修改密码</a>
                    </div>
                </div>
            </div>
            
            <!-- 收货地址 -->
            <div class="card mt-3">
                <div class="card-body">
                    <h5 class="card-title d-flex justify-content-between">
                        <span>收货地址</span>
                        <a href="{% url 'address_list' %}" class="btn btn-sm btn-outline-primary">管理</a>
                    </h5>
                    <div class="address-list">
                        {% for address in user.address_set.all|slice:":2" %}
                        <div class="address-item mb-2">
                            <p class="mb-1">{{ address.receiver_name }} {{ address.phone }}</p>
                            <small class="text-muted">{{ address.address }}</small>
                        </div>
                        {% empty %}
                        <p class="text-muted">暂无收货地址</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧订单信息 -->
        <div class="col-md-8">
            <!-- 最近订单 -->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title d-flex justify-content-between">
                        <span>最近订单</span>
                        <a href="{% url 'my_orders' %}" class="btn btn-sm btn-outline-primary">查看全部</a>
                    </h5>
                    <div class="order-list">
                        {% for order in recent_orders %}
                        <div class="card mb-3">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h6 class="card-subtitle mb-2">订单号：{{ order.order_number }}</h6>
                                        <p class="card-text">
                                            <small class="text-muted">{{ order.merchant.name }}</small><br>
                                            <small class="text-muted">{{ order.created_at|date:"Y-m-d H:i" }}</small>
                                        </p>
                                    </div>
                                    <div class="text-end">
                                        <h6 class="text-primary">¥{{ order.total_amount }}</h6>
                                        <a href="{% url 'order_detail' order.id %}" class="btn btn-sm btn-outline-primary">查看详情</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% empty %}
                        <p class="text-muted">暂无订单记录</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
            
            <!-- 收藏的商家 -->
            <div class="card mt-3">
                <div class="card-body">
                    <h5 class="card-title">收藏的商家</h5>
                    <div class="row">
                        {% for merchant in user.favorite_merchants.all|slice:":4" %}
                        <div class="col-md-6 mb-3">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="card-title">{{ merchant.name }}</h6>
                                    <p class="card-text">
                                        <small class="text-muted">
                                            <i class="fas fa-star text-warning"></i> {{ merchant.rating }}
                                        </small>
                                    </p>
                                    <a href="{% url 'merchant_detail' merchant.id %}" class="btn btn-sm btn-primary">去下单</a>
                                </div>
                            </div>
                        </div>
                        {% empty %}
                        <div class="col-12">
                            <p class="text-muted">暂无收藏的商家</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
